<template>
  <div>
    <tabs :tabs="tabs" />
    <el-form label-width="200px" size="mini">
      <el-form-item label="机构名称">
        <span>{{ response.title }}</span>
      </el-form-item>
      <el-form-item label="机构所属分类(行业)">
        <div v-for="(title, index) in response.cates" :key="index">{{ title }}</div>
      </el-form-item>
      <el-form-item label="LOGO">
        <div class="image-preview">
          <el-image :src="response.logo_url">
            <el-row slot="error" type="flex" align="middle" justify="center" class="image-slot"><i class="el-icon-picture-outline" /></el-row>
          </el-image>
        </div>
      </el-form-item>
      <el-form-item label="机构申请来源">
        <span>{{ response.from_text }}</span>
      </el-form-item>
      <el-form-item label="机构申请人">
        <span>{{ response.apply_nick_name }}</span>
      </el-form-item>
      <el-form-item label="机构申请人手机号">
        <span>{{ response.apply_user_phone }}</span>
      </el-form-item>
      <el-form-item label="申请人身份证号">
        <span>{{ response.legal_IDcard }}</span>
      </el-form-item>
      <el-form-item>
        <template v-slot:label>
          <div>申请人身份证-正面</div>
          <div class="image-preview-info">(点击图片查看大图)</div>
        </template>
        <div class="image-preview">
          <el-image :src="response.legal_IDcard_positive_url" :preview-src-list="getSrcList(0)" alt="点击看大图">
            <el-row slot="error" type="flex" align="middle" justify="center" class="image-slot"><i class="el-icon-picture-outline" /></el-row>
          </el-image>
        </div>
      </el-form-item>
      <el-form-item>
        <template v-slot:label>
          <div>申请人身份证-反面</div>
          <div class="image-preview-info">(点击图片查看大图)</div>
        </template>
        <div class="image-preview">
          <el-image :src="response.legal_IDcard_side_url" :preview-src-list="getSrcList(1)" alt="点击看大图">
            <el-row slot="error" type="flex" align="middle" justify="center" class="image-slot"><i class="el-icon-picture-outline" /></el-row>
          </el-image>
        </div>
      </el-form-item>
      <el-form-item>
        <template v-slot:label>
          <div>机构营业执照</div>
          <div class="image-preview-info">(点击图片查看大图)</div>
        </template>
        <div class="image-preview">
          <el-image :src="response.business_license_url" :preview-src-list="getSrcList(2)" alt="点击看大图">
            <el-row slot="error" type="flex" align="middle" justify="center" class="image-slot"><i class="el-icon-picture-outline" /></el-row>
          </el-image>
        </div>
      </el-form-item>
      <el-form-item label="机构联系地址">
        <span>{{ response.address }}</span>
      </el-form-item>
      <el-form-item label="机构联系电话">
        <span>{{ response.telephone }}</span>
      </el-form-item>
      <el-form-item label="机构当前状态">
        <el-tag v-if="response.status == 1" type="success">{{ response.status_text }}</el-tag>
        <el-tag v-else-if="response.status == 0 || response.status == 3" type="danger">{{ response.status_text }}</el-tag>
        <el-tag v-else type="info">{{ response.status_text }}</el-tag>
      </el-form-item>
      <el-form-item v-if="response.status == 2">
        <el-button type="primary" :disabled="disableSubmit" @click="pass">通过</el-button>
        <el-button @click="reasonBoxVisible = true">驳回</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="reasonBoxVisible" width="32%" title="驳回原因" :close-on-click-modal="false">
      <edu-textarea :value.sync="reason" :args="{ maxlength: 200, word_limit: 1, rows: 4, placeholder: '输入驳回原因' }" />
      <el-row type="flex" align="middle" justify="center" class="reason-btns">
        <el-button size="small" plain @click="reasonBoxVisible = false">取消</el-button>
        <el-button size="small" type="primary" :disabled="disableSubmit" @click="reject">驳回</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import EduTextarea from '@public/form/textarea.vue';
import Tabs from '../tabs';
export default {
  components: {
    EduTextarea,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      disableSubmit: false,
      reasonBoxVisible: false,
      reason: '',
      response: {},
      tabs: [
        {
          title: '审核-机构申请详情',
          uri: '/school/waiting/' + this.$route.params.id + '/examine',
          meta: {
            permission: 'school.examine'
          }
        }
      ]
    };
  },
  computed: {
    srcList() {
      return [this.response.legal_IDcard_positive_url, this.response.legal_IDcard_side_url, this.response.business_license_url];
    }
  },
  created() {
    this.$http.get(
      '/school/admin/waiting/' + this.$route.params.id + '/examine',
      {},
      response => {
        this.response = response.data;
      },
      _ => {
        this.$message.error('请求出错');
      }
    );
  },
  methods: {
    getSrcList: function(index) {
      const urls = this.srcList;
      return urls.slice(index).concat(urls.slice(0, index));
    },
    pass: function() {
      this.disableSubmit = true;
      this.$box
        .confirm('通过机构审核', '审核确认')
        .then(() => {
          this.$http.post(
            '/school/admin/waiting/' + this.$route.params.id + '/examine',
            {
              status: 1
            },
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.disableSubmit = false;
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {
          this.disableSubmit = false;
        });
    },
    reject: function() {
      if (!this.reason) {
        this.$message.warning('请填写驳回原因');
        return false;
      }
      this.disableSubmit = true;
      this.$http.post(
        '/school/admin/waiting/' + this.$route.params.id + '/examine',
        {
          status: 0,
          reason: this.reason
        },
        response => {
          this.$message.success(response.msg, _ => {
            this.reload();
            this.reasonBoxVisible = false;
          });
        },
        error => {
          this.disableSubmit = false;
          this.$message.error(error.msg);
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.image-preview-info {
  font-size: 12px;
}
.image-preview {
  width: 128px;
  height: 128px;
  margin-top: 10px;
  ::v-deep.el-image {
    width: 100%;
    height: 100%;
  }
  ::v-deep.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }
}
::v-deep.el-form-item__label {
  color: #909399;
}

.reason-btns {
  margin-top: 20px;
}
</style>
